<template>
  <div>
    <Card>
      <p slot="title">
        <!-- <Icon type="ios-film-outline"></Icon> -->
       案例添加
      </p>
      <Form :model="formItem" :label-width="80" style="max-width:600px">
        <FormItem label="案例名称">
          <Input v-model="formItem.name" placeholder="请输入产品名称"/>
        </FormItem>
        <!-- <FormItem label="Select">
          <Select v-model="formItem.select">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
          </Select>
        </FormItem>-->
<!--        <FormItem label="发布时间">-->
<!--          <DatePicker type="date" placeholder="请选择发布时间" v-model="formItem.pubdate"></DatePicker>-->
<!--        </FormItem>-->
        <FormItem label="项目外链">
          <Input v-model="formItem.link" placeholder="请输入产品外链">
            <Select v-model="select1" slot="prepend" style="width: 80px">
              <Option value="http">http://</Option>
              <Option value="https">https://</Option>
            </Select>
          </Input>
        </FormItem>
        <FormItem label="图标">
          <input type="hidden" v-model="formItem.logo" placeholder="请输入产品名称">
          <div class="yui-cover-box">
            <input
              class="yui-cover-box-fileInput"
              type="file"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              @change="upIcon"
            >
            <img class="yui-cover-box-img" v-if="formItem.logo" :src="$config.baseUrl.dev_y+formItem.logo" alt>
          </div>
        </FormItem>

        <FormItem label="产品封面">
          <input type="hidden" v-model="formItem.cover" placeholder="请输入产品名称">
          <div class="yui-cover-box">
            <input
              class="yui-cover-box-fileInput"
              type="file"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              @change="upImg"
            >
            <img class="yui-cover-box-img" v-if="formItem.cover" :src="$config.baseUrl.dev_y+formItem.cover" alt>
          </div>
        </FormItem>

        <!-- <FormItem label="Radio">
          <RadioGroup v-model="formItem.radio">
            <Radio label="male">Male</Radio>
            <Radio label="female">Female</Radio>
          </RadioGroup>
        </FormItem>-->
        <!-- <FormItem label="Checkbox">
          <CheckboxGroup v-model="formItem.checkbox">
            <Checkbox label="Eat"></Checkbox>
            <Checkbox label="Sleep"></Checkbox>
            <Checkbox label="Run"></Checkbox>
            <Checkbox label="Movie"></Checkbox>
          </CheckboxGroup>
        </FormItem>-->
        <!-- <FormItem label="Switch">
          <i-switch v-model="formItem.switch" size="large">
            <span slot="open">On</span>
            <span slot="close">Off</span>
          </i-switch>
        </FormItem>-->
        <!-- <FormItem label="Slider">
          <Slider v-model="formItem.slider" range></Slider>
        </FormItem>-->
        <FormItem label="摘要">
          <Input
            v-model="formItem.desc"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="请填写摘要"
          ></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="ySub">Submit</Button>
          <Button style="margin-left: 8px">Cancel</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>
<script>
import { uploadFile } from '@/api/public'
import { saveCase } from '@/api/caseApi'
import { mapMutations } from 'vuex'

export default {
  name: 'corporate-case-add',
  data () {
    return {
      formItem: {
        proName: '', // 产品名称
        pubdate: '', // 发布时间
        abstract: '', // 摘要
        externalLinks: '', // 项目外链
        cover: '', // 封面
        logo: '',
        input: '',
        select: '',
        desc: '',
        content: '',
        radio: 'male',
        checkbox: [],
        switch: true,

        textarea: ''
      },
      select1: 'http'
    }
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    /**
     * 封面图上传
     */
    upImg: function (fileDom) {
      let that = this
      let files = event.target.files || event.dataTransfer.files
      if (!files.length) {
        return
      }
      let file = files[0]
      let formData = new FormData()
      formData.append('file', file)
      uploadFile(formData).then(res => {
        if (res.data.msg === 0) {
          that.formItem.cover = res.data.path
        }
      })
    },
    upIcon: function (fileDom) {
      let that = this
      let files = event.target.files || event.dataTransfer.files
      if (!files.length) {
        return
      }
      let file = files[0]
      let formData = new FormData()
      formData.append('file', file)
      uploadFile(formData).then(res => {
        if (res.data.msg === 0) {
          that.formItem.logo = res.data.path
        }
      })
    },
    ySub: function () {
      let that = this
      let obj = that.formItem
      saveCase(obj).then(
        res => {
          console.log(res)
          if (res.data.msg === 0 || res.data.msg === '0') {
            this.$Modal.success({
              title: '添加成功',
              content: '添加成功',
              onOk: () => {
                // that.$Message.info('Clicked ok');
                this.closeTag({
                  name: 'CaseAdd'
                })
              },
            })
          }
        }).catch(err => {
        console.log('err', err)
      })
    }
  }
}
</script>
<style>
  .yui-cover-box {
    width: 300px;
    height: 180px;
    position: relative;
    border: 1px double #d9d9d9;
  }

  .yui-cover-box:after,
  .yui-cover-box:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #d9d9d9;
  }

  .yui-cover-box:after {
    width: 2px;
    height: 100px;
  }

  .yui-cover-box:before {
    width: 100px;
    height: 2px;
  }

  .yui-cover-box-fileInput {
    position: absolute;
    opacity: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
  }

  .yui-cover-box-img {
    position: absolute;

    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
  }
</style>
